<template>

    <div style="margin-bottom: var(--card-space);" v-if="$slots.toolbar">
        <slot name="toolbar"></slot>
    </div>

    <el-table :data="data" :header-cell-style="{ background: '#ccddff', fontWeight: 'normal', color: '#515a6e' }"
        row-key="_id" show-overflow-tooltip>
        <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :width="item.width ?? ' auto'"
            :align="item.align ?? 'left'" v-bind="item.settings" :prop="item.prop">
            <template #default="scoped" v-if="$slots[item.prop]">
                <slot :name="item.prop" :row="scoped.row"></slot>
            </template>
        </el-table-column>
    </el-table>
    <div class="flex-end" style="margin-top: 22px;" v-if="pageData">
        <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
            :page-sizes="[4, 8, 10]" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="total" />
    </div>
</template>

<script setup lang="ts">
defineProps<{
    data: any[],
    columns: ColumnItem[],
    total?: number
}>();
const pageData = defineModel<pageDataType>('pageData');

</script>

<style scoped></style>